<template>
  <div class="bottom-bar">
    <div class="check-content">
      <check-button class="check-button" :ischange="isSelectAll" @click.native="checkClick"></check-button>
      <span>全选</span>
    </div>
    <div class="price">
      合计：￥{{totalPrice}}
    </div>
    <div class="calculate" @click="calcClick">
      去计算：({{checkLength}})
    </div>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import CheckButton from '../../../components/content/checkButton/CheckButton.vue'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      CheckButton
    },
    props: {},
    data() {
    //这里存放数据
      return {

      };
    },
    //计算属性 类似于data概念
    computed: {
      totalPrice(){
        return this.$store.state.cartList.filter(item =>{
          return item.checked
        }).reduce((preValue,item) =>{
          return preValue + item.price * item.count
         },0).toFixed(2)
      },
      checkLength(){
        return this.$store.state.cartList.filter(item => item.checked).length
      },
      isSelectAll(){
        if (this.$store.state.cartList.length === 0) return false
        return !(this.$store.state.cartList.filter(item => !item.checked).length)
      }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      checkClick(){
        if (this.isSelectAll) { //全部选中
          this.$store.state.cartList.forEach(item => item.checked = false);
        }else{
          this.$store.state.cartList.forEach(item => item.checked = true);
        }
      },
      calcClick(){
        if (!this.isSelectAll) {
          this.$toast.show('请选择购买商品', 2000)
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>
.bottom-bar{
  height: 3.125rem;
  width: 100%;
  background-color: #eee;
  position: relative;
  display: flex;
  font-size: 0.625rem;
}
.check-content{
  width: 3.75rem;
  height: 100%;
  margin-left: 0.625rem;
  display: flex;
/* line-height: 3.125rem;
  */
  align-items: center;
}
.check-button{
  margin-right: 0.3125rem;
}
.price{
  height: 100%;
  flex: 1;
  line-height: 3.125rem;
  margin-left: 1.875rem;
}
.calculate{
  width: 4.375rem;
  height: 100%;
  text-align: center;
  line-height: 3.125rem;
  background-color: var(--color-tint);
  color: #fff;
}
</style>